<template>
	<view>

		<view class="top u-flex u-row-between">
			<view class="u-flex" style="align-items: center;">
				<u-image src="/static/icon_address.png" width="60" height="60"></u-image>
				<view class="u-margin-left-20" style="width: 500rpx;" v-if="address.id">
					<view>
						<text style="font-size: 32rx;font-weight: bold;">{{address.realname}}</text>
						<text style="color:#999999;margin-left: 20rpx;">{{address.phone}}</text>
					</view>
					<view class="">
						{{address.address}}
					</view>
				</view>
				<view v-else style="font-size: 32rpx;font-weight: bold;margin-left: 20rpx;" hover-class="none">
					<navigator url="../address/addAddress">请先选择收货地址</navigator>
				</view>
			</view>
			<u-icon name="edit-pen" color="#628DFF" size="40" @click="changeAddress" v-if="address.id"></u-icon>
		</view>

		<view v-for="(item,index) in list" :key="index" class="list">
			<view class="u-flex">
				<u-image :src="item.cover" width="160" height="160"></u-image>
				<view class="right">
					<view class="title">
						{{item.goodsName}}
					</view>
					<view class="size" v-if="item.specName">
						{{item.specName}}
					</view>

					<view class="controls">
						<view class="price">
							<text v-if="goodsType==1">￥</text><text v-if="goodsType==2">积分</text>
							<text>{{ptt?item.price:item.ptPrice}}</text>
						
						</view>
						<view class="num">
							x{{item.num}}
						</view>
					</view>
				</view>


			</view>
		</view>

		<view class="mode">
			<u-cell-group>
				<u-cell-item title="商品运费" :value="expressFee+'元'" :arrow="false" :hover-class="false"></u-cell-item>
				<u-cell-item title="商品备注" :arrow="false" :hover-class="false" >
					<view slot="label" style="width:650rpx;"> 
						<u-input v-model="liuyan" :border="border" placeholder="在此处添加您的订单备注" type="textarea"/>
					</view>
				</u-cell-item>
			</u-cell-group>
		</view>


		<view class="mode" v-if="!isjifen">
			<u-cell-group>


				<u-cell-item title="代金券" :value="voucher?'-'+conpund:'' " :arrow="false" :hover-class="false"
					v-if="ptt">
					<view class="u-margin-left-20 u-flex" slot="right-icon">
						<view class="u-margin-right-20">{{voucher?'':'当前无代金券可用'}}</view>
						<u-switch slot="right" v-model="switchVal" :disabled="!voucher"></u-switch>
					</view>
				</u-cell-item>

				<u-cell-item title="支付方式" :value="payway" @click="payways" v-if="ptt">
					<view slot="rig"></view>
				</u-cell-item>

			</u-cell-group>
		</view>




		<view class="bottomFix">
			<view class="u-flex" style="align-items: center;">
				<view class="u-flex u-margin-right-20">
					<view>不含运费共：</view>
					<view style="color:#FF6450;font-size: 56rpx;" v-if="goodsType==1">
						<text ></text>
						<text>￥{{payMoney}}</text>
					</view>
					<view style="color:#FF6450;font-size: 56rpx;" v-if="goodsType==2">	
						<text v-if="goodsType==2">积分</text>
						<text>{{jifenMoney}}</text>
					</view>
					
				</view>
				<view class="sure" @click="sure">提交订单</view>
			</view>

		</view>

		<u-toast ref="uToast" />
		<paystatus ref="children" @jisuan="jisuan"></paystatus>

	</view>
</template>

<script>
	import paystatus from '../../components/payway.vue';
	import payway from '../../common/wxpay.js';
	export default {
		components: {
			paystatus
		},
		watch: {
			switchVal: {
				immediate: true,
				handler(v) {
					this.conpundMoney = v ? 20 : 0
					this.jisuan()
				}
			},
			payway: {
				handler(v) {
					console.log(v)
					// this.infor()
					// console.log(v)
				}
			}
		},
		data() {
			return {
				liuyan: "",
				address_id:"",
				expressFee: '',
				payMoney: "",
				payway: "余额支付",
				conpund: "",
				address: {},
				list: [],
				num: '',
				id: '',
				Sid: '',
				switchVal: false,
				voucher: "",
				car_id: [],
				commission: 0,
				conpundMoney: 0,
				realprice: "",
				ptt: "",
				isjifen: 0,
				jifenMoney:"",
				goodsType: "", //goodsType=1 普通商品 //goodsType=2 积分商品 
			}
		},
		async onLoad(options) {
			console.log(options)
			uni.hideShareMenu()
			if (options.id) {
				this.num = options.num;
				this.Sid = options.Sid;
				this.id = options.id
			}

			if (options.car_id) {

				this.car_id = options.car_id.split(",")
			}

			if (options.ptt) {
				this.ptt = Number(options.ptt)

			}
			if (options.isjifen) {
				this.isjifen = options.isjifen
			}

			await this.getOrder()
			this.infor()

		},
		onShow() {
			this.getAddress()

		},
		methods: {
			changeAddress() {
				uni.navigateTo({
					url: "../address/index"
				})
			},
			jisuan() {
				if(this.ptt){
					var shijiMoneny = this.realprice - this.conpundMoney - (this.payway == "余额支付" ? this.commission : 0);
					this.payMoney = shijiMoneny <= 0 ? 0 : shijiMoneny.toFixed(2)
				}
			},
			infor() {
				this.$u.post('/api/user/information', {

				}, {}).then(res => {
					let commission = res.data.commission
					this.commission = commission;

					this.jisuan()
					console.log(this.switchVal)
					// this.jisuan()
					// let payMoney = Number(this.payMoney);
					// let payway = this.payway;
					// if (payway == '余额支付') {
					// 	this.payMoney = (payMoney - commission).toFixed(2) < 0 ? 0 : (payMoney - commission)
					// 		.toFixed(2)
					// } else {
					// 	this.payMoney = this.realprice
					// }
					// console.log(payway)

				}).catch(err => {})
			},
			payways() {
				this.$refs.children.show = true
			},
			// 获取地址信息
			getAddress() {
				this.$u.post('/api//user/address', {
                      address_id:this.address_id
				}, {}).then(res => {
				    if(Array.isArray(res.data)){
						if (res.data.length) {
							this.address = res.data[0]
						}
					}else{
						  this.address = res.data
					}
					
					
				
					
					
				}).catch(err => {})

			},
			// 获取订单信息
			getOrder() {
				return new Promise((resolve, reject) => {
					this.$u.post('/api/indent/affirm', {
						goods_id: this.id,
						goods_spec_id: this.Sid,
						num: this.num,
						cart_id: this.car_id,
						pt:this.ptt?0:1
					}, {}).then(res => {
						this.list = res.data.goods;
						this.payMoney = res.data.totalMoney;
						this.expressFee = res.data.expressFee;
						this.voucher = res.data.voucher;
						this.conpund = res.data.voucherMoney;
						this.goodsType = res.data.goodsType;
						this.realprice = res.data.totalMoney;
						this.jifenMoney=res.data.totalMoney
						resolve(res)

					}).catch(err => {})
				})


			},
			sure() {

				if (!this.address.id) {
					this.$refs.uToast.show({
						title: '请先填写收货地址',
						type: 'error',
					})
				} else {
					this.$u.post(this.ptt ? '/api/indent/buy' : '/api/indent/ptt', {
						address_id: this.address.id,
						cart_id: this.car_id,
						goods_id: this.id,
						goods_spec_id: this.Sid,
						num: this.num,
						use_voucher: this.switchVal ? 1 : 0,
						use_balance: this.payway == "余额支付" ? 1 : 0,
					}, {}).then(res => {
						if (res.data) {
							var packages = res.data.package;
							var {
								noncestr,
								timestamp,
								signtype,
								paysign
							} = res.data
							payway.wx(timestamp, noncestr, packages, signtype, paysign).then(res => {
								
								uni.switchTab({
									url: "../book/index"
								})

							}).catch(err => {
								uni.navigateBack({

								})
							})
						} else {
							
							this.$refs.uToast.show({
								title: '购买成功',
								type: 'success',
								callback :()=>{
									uni.switchTab({
										url: "../book/index"
									})
								}
							})
							
						}



					}).catch(err => {})


				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 200rpx;
	}

	.mode {

		background: #FFFFFF;
		box-shadow: 0px 4rpx 6rpx rgba(209, 209, 209, 0.26);
		border-radius: 20rpx;
		width: 690rpx;
		margin: 40rpx auto;
	}

	.top {
		width: 690rpx;
		background: #FFFFFF;
		box-shadow: 0px 4rpx 6rpx rgba(209, 209, 209, 0.26);
		border-radius: 20rpx;
		margin: 40rpx auto;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.list {
		width: 690rpx;
		height: 240rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 6rpx rgba(209, 209, 209, 0.26);
		border-radius: 20rpx;
		margin: auto;
		padding: 20rpx;
		display: flex;
		align-items: center;

		.right {
			margin-left: 20rpx;
			width: 450rpx;

			.size {
				background: #F6F6F6;
				border-radius: 30rpx;
				padding: 7rpx 30rpx;
				text-align: center;
				display: table !important;
				font-size: 24rpx;
				color: #999999;
				margin: 20rpx 0;
			}
		}

		.controls {
			display: flex;
			justify-content: space-between;

			.price {
				color: #FF6450;
				font-size: 36rpx;
			}

			.num {
				color: #628DFF;
				font-size: 36rpx;

			}
		}



	}

	.bottomFix {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		display: flex;
		justify-content: flex-end;
		padding: 20rpx;
		align-items: center;
		box-shadow: 0px -2rpx 6rpx rgba(229, 229, 229, 0.4);
		background: #FFFFFF;
		z-index: 99;
	}

	.sure {
		width: 200rpx;
		height: 80rpx;
		background: #628DFF;
		border-radius: 40rpx;
		text-align: center;
		font-size: 28rpx;
		line-height: 80rpx;
		color: #fff;

	}
</style>
